<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="flex">
			<div class="text_d color_three white_nowrap margin_right1 margin_top1">输入问题：</div>
			<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" resize="none" show-word-limit minlength="5" maxlength="500"
				placeholder="请输入您要反馈的问题（5-500字内）" v-model="des">
			</el-input>
		</div>
		<div class="flex margin_top2">
			<div class="text_d color_zero white_nowrap margin_right2 margin_top1">上传图片：</div>
			<el-form label-width="0px">
				<el-form-item>
					<el-upload :headers="{
				'Token':tokens
			}" class="avatar-uploader" action="http://kaoshi.kongzhongwangluo.top/api/common/upload" :show-file-list="false"
					 multiple	:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
					<font class="upload-text">只能上传jpg/png文件，且不超过10MB，最多可以上传4张图片</font>
				</el-form-item>
				<el-form-item>
					<ul class="flexleft">
						<li v-for="(item,index) in ossFileUploads" :key="index"  style="position: relative;" class="noImage margin_right1 pointer">
							<img :src="item.filePath.fullurl" class="noImage"  @click.stop="dialogVisible=true;dialogImageUrl=item.filePath.fullurl;">
							<i style="color: #3478f5;position: absolute;top: 5px;right: 5px;font-size: 16px;" class="el-icon-circle-close " @click.stop="handlerDel(item, index)"></i>
						</li>
					</ul>
				</el-form-item>
			</el-form>
			<el-dialog :visible.sync="dialogVisible">
				<img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
		</div>
		<div class="flexleft margin_top">
			<div class="text_d color_zero margin_leftr margin_right1 white_nowrap">联系电话：</div>
			<el-input v-model="mobile" placeholder="请输入联系手机号"></el-input>
		</div>
		<div class="flexleft margin_top7">
			<div class="themeBtnbr margin_right1" @click="submit">立即提交</div>
			<div class="themeBtnbrSmall" @click="goHistoryFeedback">历史反馈</div>
		</div>
	</div>
</template>

<script>
	import {
		member_feedback
	} from "@/API/system"
	export default{
		data(){
			return {
				ossFileUploads: [], //图片
				tokens:"",
				dialogVisible:false,
				dialogImageUrl:"",
				des: "",
				mobile: "",
			}
		},
		mounted(){
			this.tokens = localStorage.getItem("token")
		},
		methods:{
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value); 
				return a;
			},
			submit(){
				if (this.des == '') {
					this.$message.warning("请输入反馈意见!")
					return;
				}
				if (this.mobile == '') {
					this.$message.warning("请输入手机号码!")
					return;
				}
				if (!this.isMobile(this.mobile)) {
					this.$message.warning("手机号码格式错误!")
					return;
				}
				let arr = []
				this.ossFileUploads.forEach(item=>{
					arr.push(item.filePath.url)
				})
				member_feedback({
					content:this.des,
					images:arr.join(),
					contact:this.mobile,
				}).then((res=>{
					if(res.data.code==1){
						this.$message.success(res.data.msg)
						this.ossFileUploads = []
						this.des = ""
						this.mobile = ""
					}else{
						this.$message.error(res.data.msg)
					}
				}))
			},
			// 上传图片
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
				const isLt2M = file.size / 1024 / 1024 < 10;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是jpg或者png格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(res, file) {
				if (res.code !== 1) {
					this.$message.error(res.msg);
					return false;
				}
				// 图片上传成功，添加到图片数组中，进行渲染
				if(this.ossFileUploads.length<4){
					// 图片上传成功，添加到图片数组中，进行渲染
					this.ossFileUploads.push({
						filePath: res.data,
						type: "blood",
						dataId: file.uid
					})
				}else{
					this.$message.warning('上传头像最多上传4张');
				}
			},
			// 删除图片
			handlerDel(item, index) {
				this.ossFileUploads.splice(index, 1)
				this.$message.success('删除成功')
			},
			goHistoryFeedback(){ //历史反馈
				this.$router.push({
					path:"/setUp/historyFeedback"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noImage{
		width: 76px;
		min-width: 76px;
		height: 76px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	::v-deep .el-input,.el-textarea{
		width: 50%;
	}
</style>